<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>七牛云OSS文件上传测试</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .container {
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 600px;
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 24px;
            font-weight: 500;
        }
        
        .content {
            padding: 30px;
        }
        
        .upload-area {
            border: 2px dashed #dcdcdc;
            border-radius: 8px;
            padding: 30px;
            text-align: center;
            transition: all 0.3s ease;
            background: #f9f9f9;
            margin-bottom: 20px;
        }
        
        .upload-area:hover {
            border-color: #667eea;
            background: #f0f0ff;
        }
        
        .upload-area.active {
            border-color: #667eea;
            background: #e6e6ff;
        }
        
        .upload-icon {
            font-size: 48px;
            color: #dcdcdc;
            margin-bottom: 15px;
        }
        
        .upload-text {
            color: #666;
            margin-bottom: 10px;
        }
        
        .upload-hint {
            color: #999;
            font-size: 12px;
        }
        
        #fileInput {
            display: none;
        }
        
        .browse-btn {
            background: #667eea;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: background 0.3s ease;
            margin-top: 15px;
        }
        
        .browse-btn:hover {
            background: #5a67d8;
        }
        
        .upload-btn {
            background: #4caf50;
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            transition: background 0.3s ease;
            width: 100%;
            margin-bottom: 20px;
        }
        
        .upload-btn:hover {
            background: #45a049;
        }
        
        .upload-btn:disabled {
            background: #cccccc;
            cursor: not-allowed;
        }
        
        .file-info {
            display: none;
            padding: 15px;
            background: #f5f5f5;
            border-radius: 6px;
            margin-bottom: 20px;
        }
        
        .file-info.active {
            display: block;
        }
        
        .file-name {
            font-weight: 500;
            color: #333;
            margin-bottom: 5px;
        }
        
        .file-size {
            font-size: 14px;
            color: #666;
        }
        
        .progress-container {
            display: none;
            margin-bottom: 20px;
        }
        
        .progress-container.active {
            display: block;
        }
        
        .progress-bar {
            width: 100%;
            height: 8px;
            background: #f0f0f0;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #667eea, #764ba2);
            border-radius: 4px;
            transition: width 0.3s ease;
            width: 0%;
        }
        
        .progress-text {
            text-align: center;
            font-size: 14px;
            color: #666;
            margin-top: 8px;
        }
        
        .result {
            display: none;
            padding: 20px;
            border-radius: 6px;
            margin-bottom: 20px;
        }
        
        .result.success {
            display: block;
            background: #e8f5e9;
            border: 1px solid #c8e6c9;
            color: #2e7d32;
        }
        
        .result.error {
            display: block;
            background: #ffebee;
            border: 1px solid #ffcdd2;
            color: #c62828;
        }
        
        .result-title {
            font-weight: 500;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }
        
        .result-title i {
            margin-right: 8px;
        }
        
        .result-message {
            font-size: 14px;
            line-height: 1.5;
        }
        
        .result-link {
            margin-top: 10px;
            word-break: break-all;
            font-size: 12px;
        }
        
        .result-link a {
            color: #667eea;
            text-decoration: none;
        }
        
        .result-link a:hover {
            text-decoration: underline;
        }
        
        .reset-btn {
            background: #f5f5f5;
            color: #666;
            border: 1px solid #dcdcdc;
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
            width: 100%;
        }
        
        .reset-btn:hover {
            background: #e8e8e8;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>七牛云OSS文件上传测试</h1>
        </div>
        <div class="content">
            <div class="upload-area" id="uploadArea">
                <div class="upload-icon">📁</div>
                <div class="upload-text">拖拽文件到此处或点击选择文件</div>
                <div class="upload-hint">支持上传各种类型的文件</div>
                <button class="browse-btn" id="browseBtn">选择文件</button>
                <input type="file" id="fileInput">
            </div>
            
            <div class="file-info" id="fileInfo">
                <div class="file-name" id="fileName">文件名</div>
                <div class="file-size" id="fileSize">文件大小</div>
            </div>
            
            <button class="upload-btn" id="uploadBtn" disabled>上传文件</button>
            
            <div class="progress-container" id="progressContainer">
                <div class="progress-bar">
                    <div class="progress-fill" id="progressFill"></div>
                </div>
                <div class="progress-text" id="progressText">0%</div>
            </div>
            
            <div class="result" id="result"></div>
        </div>
    </div>

    <script>
        // 全局变量
        let selectedFile = null;
        
        // DOM元素
        const uploadArea = document.getElementById('uploadArea');
        const fileInput = document.getElementById('fileInput');
        const browseBtn = document.getElementById('browseBtn');
        const uploadBtn = document.getElementById('uploadBtn');
        const fileInfo = document.getElementById('fileInfo');
        const fileName = document.getElementById('fileName');
        const fileSize = document.getElementById('fileSize');
        const progressContainer = document.getElementById('progressContainer');
        const progressFill = document.getElementById('progressFill');
        const progressText = document.getElementById('progressText');
        const result = document.getElementById('result');
        
        // 事件监听器
        browseBtn.addEventListener('click', () => fileInput.click());
        
        fileInput.addEventListener('change', (e) => {
            if (e.target.files.length > 0) {
                handleFileSelect(e.target.files[0]);
            }
        });
        
        uploadBtn.addEventListener('click', uploadFile);
        
        // 拖拽相关事件
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.classList.add('active');
        });
        
        uploadArea.addEventListener('dragleave', () => {
            uploadArea.classList.remove('active');
        });
        
        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.classList.remove('active');
            
            if (e.dataTransfer.files.length > 0) {
                handleFileSelect(e.dataTransfer.files[0]);
            }
        });
        
        // 处理文件选择
        function handleFileSelect(file) {
            selectedFile = file;
            fileName.textContent = file.name;
            fileSize.textContent = formatFileSize(file.size);
            fileInfo.classList.add('active');
            uploadBtn.disabled = false;
            result.className = 'result';
        }
        
        // 格式化文件大小
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
        
        // 上传文件
        function uploadFile() {
            if (!selectedFile) return;
            
            const formData = new FormData();
            formData.append('file', selectedFile);
            
            // 重置进度条和结果
            progressContainer.classList.add('active');
            progressFill.style.width = '0%';
            progressText.textContent = '0%';
            result.className = 'result';
            
            // 创建XMLHttpRequest对象
            const xhr = new XMLHttpRequest();
            
            // 设置上传进度
            xhr.upload.addEventListener('progress', (e) => {
                if (e.lengthComputable) {
                    const percent = (e.loaded / e.total) * 100;
                    progressFill.style.width = percent + '%';
                    progressText.textContent = Math.round(percent) + '%';
                }
            });
            
            // 设置请求完成后的回调
            xhr.addEventListener('load', () => {
                progressContainer.classList.remove('active');
                
                if (xhr.status === 200) {
                    try {
                        const response = JSON.parse(xhr.responseText);
                        if (response.code === 200) {
                            showResult(true, '文件上传成功！', response.data);
                        } else {
                            showResult(false, response.message || '文件上传失败');
                        }
                    } catch (error) {
                        showResult(false, '响应解析错误');
                    }
                } else {
                    showResult(false, `上传失败，状态码：${xhr.status}`);
                }
            });
            
            // 设置请求错误回调
            xhr.addEventListener('error', () => {
                progressContainer.classList.remove('active');
                showResult(false, '上传请求错误');
            });
            
            // 发送请求
            xhr.open('POST', '/oss-qiniu/api/qiniu-oss/upload', true);
            xhr.send(formData);
        }
        
        // 显示结果
        function showResult(success, message, fileUrl = null) {
            result.className = 'result ' + (success ? 'success' : 'error');
            
            const icon = success ? '✅' : '❌';
            const title = success ? '成功' : '失败';
            
            let resultHTML = `
                <div class="result-title">
                    <i>${icon}</i>${title}
                </div>
                <div class="result-message">${message}</div>
            `;
            
            if (success && fileUrl) {
                resultHTML += `
                    <div class="result-link">
                        上传的文件URL: <a href="${fileUrl}" target="_blank">${fileUrl}</a>
                    </div>
                `;
            }
            
            // 添加重置按钮
            resultHTML += `
                <button class="reset-btn" onclick="resetUpload()">重新上传</button>
            `;
            
            result.innerHTML = resultHTML;
        }
        
        // 重置上传
        function resetUpload() {
            selectedFile = null;
            fileInput.value = '';
            fileInfo.classList.remove('active');
            uploadBtn.disabled = true;
            result.className = 'result';
        }
    </script>
</body>
</html>